<!--
 * @Author       : cxh
 * @Date         : 2021-12-27 22:14:49
 * @LastEditTime : 2021-12-28 11:22:22
 * @LastEditors  : cxh
 * @Description  : 
 * @FilePath     : \vue_WorkSpace\vue-wpt\src\pages\list\components\filter\index.vue
-->
<template>
  <div>
    <div class="filter-wrap">
      <div class="filter-line">
        <div class="filter-item">
          <div class="label">姓名</div>
          <input type="text" v-model="filter.username" />
        </div>
        <div class="filter-item">
          <div class="label">性别</div>
          <select v-model="filter.gender">
            <option
              v-for="item in $options.sexOptions"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </option>
          </select>
        </div>
        <div class="filter-item">
          <div class="label">权限</div>
          <select v-model="filter.permissions">
            <option
              v-for="item in $options.lvOptions"
              :value="item.value"
              :key="item.value"
            >
              {{ item.label }}
            </option>
          </select>
        </div>
      </div>
    </div>
    <div>
      <button @click="handleSearch">搜索</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>
<script>
import { SEX_OPTIONS, LV_OPTIONS, DEFAULT_FILTER } from "./../../config.js";
export default {
  name: "filters",
  data: function () {
    return {
      filter: {
        ...DEFAULT_FILTER,
      },
    };
  },
  props: ["updateUserList", "getTableDataSource"],
  methods: {
    // 点击搜索后的回调
    handleSearch: function () {
      this.getTableDataSource(this.filter);
    },
    reset: function () {
      this.filter = {
        ...DEFAULT_FILTER,
      };
    },
  },
  sexOptions: SEX_OPTIONS,
  lvOptions: LV_OPTIONS,
};
</script>

<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
